<template>
    <div class="user-list"
        >
        <div class="search-part">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="grid-content">
                        <v-simpsearch class="simple-search" @transferParam="getParam"></v-simpsearch>
                    </div>
                </el-col>
                <el-col :span="10">
                    <div class="grid-content pdt10 btns">
                        <el-button class="red-btn" @click="makeNewOne"> 新 增 </el-button>
                        <el-button class="gray-btn" @click="del"> 删 除 </el-button>
                    </div>
                </el-col>
            </el-row>
        </div>
        <div id="myDIV">
            <waterfall
                    :line-gap="220"
                    :max-line-gap="360"
                    :min-line-gap="220"
                    :fixed-height="true"
                    :watch="items"
                    align="center"
                    >
                <!-- each component is wrapped by a waterfall slot -->
                <waterfall-slot
                        v-for="(item, index) in items"
                        :width="220"
                        :height="260"
                        :order="index"
                        :key="item.id"
                        move-class="item-move"
                >
                    <v-usercomp
                            :item="item"
                            :index="index"
                            class="item"
                            :backSelectItems="selectItems"
                            :backItems="getCurrentSelectItems"
                            :viewClick="function(){info(item.id)}"
                            :buttonText="buttonText"
                            :isMutpart="true"
                    >

                        <div class="role">
                          <span v-if="item.primaryOrganName">
                            <span :title="item.primaryOrganName" v-if="(item.primaryOrganName).length > 4">
                              {{item.primaryOrganName.slice(0, 4) + "..."}}
                            </span>

                            <span v-else-if="(item.primaryOrganName).length == 0">
                            暂无
                            </span>
                            <span v-else>
                              {{item.primaryOrganName}}
                            </span>
                          </span>
                            <span class="line">|</span>
                            <span v-if="item.userRoleNames">
                              <span :title="item.userRoleNames" v-if="(item.userRoleNames).length > 4">
                                {{item.userRoleNames.slice(0, 4) + "..."}}
                              </span>
                              <span :title="item.userRoleNames" v-else-if="(item.userRoleNames).length == 0">
                                暂无
                              </span>
                              <span v-else>
                                {{item.userRoleNames}}
                              </span>
                            </span>
                            <span v-else>
                              暂无
                            </span>
                        </div>

                    </v-usercomp>
                </waterfall-slot>
            </waterfall>
            <div class="pages">当前第{{currentPage}}页总共{{totalPage}}页</div>
            <div style=" width: 150px; margin: 0 auto;" v-if="allData">没有更多数据了</div>
        </div>
    </div>
</template>
<script>
    import Waterfall from 'vue-waterfall/lib/waterfall.vue';
    import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot';
    import vUsercomp from '../../common/UserComp.vue';
    import vSimpsearch from '../SimpSearch.vue';
    import * as type from '../../../store/types';
    export default {
        name: 'keepalive-false',
        components: {
            vUsercomp, Waterfall, WaterfallSlot, vSimpsearch
        },
        data: function () {
            return {
                allData: false,
                loading: true,
                allItems: [],
                selectItems: [],
                items: [],
                rows: 20,//显示数量
                page: 1,//当前页数
                totalPage: 1,//总页数
                userItem: [],
                param: '',
                buttonText: '查看修改信息',
                currentUser:{},
            }
        },
        computed: {
            currentPage: function () {

                if (this.page < this.totalPage) {

                    return this.page;
                } else {
                    return this.totalPage;
                }
            }
        },
        mounted: function () {
            this.currentUser = JSON.parse(localStorage.getItem("currentUser"));
            this.loadMore();
            this.$$("#content").scrollTop(0)
            console.log(this.$$("#content").scrollTop())
            let self = this;
            this.$$("#content").on('scroll', function (e) {
                var scrollTop = self.$$("#content").scrollTop();
                var innerHeight = self.$$("#content").innerHeight();
                var scrollHeight = self.$$("#content").scrollHeight();
                if (scrollTop + innerHeight >= scrollHeight) {
                    self.page++;
                    if (self.page > self.totalPage) {
                        return;
                    }
                    self.loading = true;
                    self.loadMore();
                    console.log('*(******************' + self.page)
                }
            });

            document.getElementById("myDIV").addEventListener('wheel', function (e) {
                if (e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0) {
                    console.log(e.wheelDelta < 0 && self.$$("#content").scrollTop() === 0)
                    self.page++;
                    self.loading = true;
                    self.loadMore();
                }
            });
        },
        watch: {
            param(val){
                this.items = [];
                this.page = 1;
                this.totalPage = 1;
                this.loadMore();
            }
        },
        methods: {
            loadMore: function () {
                console.log("==============>loadMore")
                if (this.page <= this.totalPage) {
                    let self = this;
                    self.loading = true;
                    this.$axioxs.get("/user/?states=0,1&kindCode=10&param=" + this.param + "&rows=" + this.rows + "&page=" + this.page)
                        .then(function (res) {
                          console.log(res.data)
                            self.totalPage = res.data.totalPage;
                            self.allItems = res.data.records;
                            self.allItems.forEach(item => {
                                // item.height = 265;
                                // item.width = 300;
                                self.items.push(item);
                            });
                            self.allData = false;
                            self.loading = false;
                        })
                        .catch(function (error) {
                            console.log(error);
                            self.$message({
                                showClose: true,
                                type: 'error',
                                message: error,
                                onClose: function () {
                                    self.loading = false;
                                }
                            });
                        });
                }
                else {
                    this.loading = false;
                    this.allData = true;
                }
            },
            makeNewOne(){
              let hasRights = this.currentUser.rights.find(obj=> obj === 'user_add')
              if(hasRights != 'user_add'){
                this.$message({
                    showClose: true,
                    message: '权限不足',
                    type: 'warning'
                });
                return;
              }
                this.$store.commit(type.CHANGE_INDEX, '/user/info');
                this.$router.push({
                    path: '/user/info',
                    query: {
                        new: 'new',
                        id:''
                    }
                });
            },
            getCurrentSelectItems: function (items) {
                console.log("==================>")
                console.log(items)
                // alert(JSON.stringify(items.length))
            },
            del(){
              let hasRights = this.currentUser.rights.find(obj=> obj === 'user_del')
              if(hasRights != 'user_del'){
                this.$message({
                    showClose: true,
                    message: '权限不足',
                    type: 'warning'
                });
                return;
              }
                console.log(this.selectItems)
                this.selectItems.forEach(item => {
                    let self = this;
                    this.$axioxs.delete('/user/' + item.id)
                        .then(function (res) {
                                console.log('删除成功');
                                self.$message({
                                    showClose: true,
                                    message: '删除成功',
                                    type: 'success'
                                });

                                self.items.splice(self.items.indexOf(item), 1)
                                self.selectItems.splice(self.selectItems.indexOf(item), 1)

                            },
                            (res) => {
                                this.$message({
                                    showClose: true,
                                    type: 'error',
                                    message: res
                                });
                            });
                })
                console.log(this.selectItems)

            },
            getParam(res){
                this.param = res;
                this.$$("#content").scrollTop(0)
            },
            info: function (itemid) {
//              let hasRights = this.currentUser.rights.find(obj=> obj === 'user_edit')
//              if(hasRights != 'user_edit'){
//                this.$message({
//                    showClose: true,
//                    message: '权限不足',
//                    type: 'warning'
//                });
//                return;
//              }
                console.log(itemid)
                this.$store.commit(type.CHANGE_INDEX, '/user/info');
                this.$router.push({
                    path: '/user/info',
                    query: {id: itemid}
                });
            }
        },

    }

</script>

<style scoped>
    .item {
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        font-size: 1.2em;
        color: rgb(0, 158, 107);
    }

    #myDIV {
        padding-top: 60px;
        margin: 0 20px;
    }

    .simple-search .el-input__inner {
        border-radius: 20px;
    }

    .search-part {
        width: 100%;
    }

    .search-layout {
        padding: 10px;
        background-color: #fff;
    }
    .pages {
        position: fixed;
        bottom: 0;
        text-align: center;
        width: 70%;
        margin: 0 auto;
        /* background: black; */
        z-index: 20;
        height: 20px;
        opacity: 0.5;
        font-size: 9px;
    }
</style>
